
import React from "react";
import { Form, Col, Input, Row, Button } from "antd";
import { MinusCircleOutlined} from "@ant-design/icons";

 export default function accessoryGroup(){

    return(


        <Col span={24} >
           
        <Form.List
    name="accessoryGroups"
  >
    {(fields, { add, remove }) => {
   

      return(
        <>
        <Row>
          <Col span={24}>
          <div className="headlineClass">
          加料
        </div>
         
          </Col>
        </Row>
        
       
        {fields.map((field) => (
          <Row key={field.key}>
            <Col span={10}>

              <Row className="divfix">
              <Col span={8}  className="leftCommDiv">
                加料名
              </Col>
              <Col span={16}>
                     <Form.Item
                      name={[field.name, 'name']}
                          fieldKey={[field.fieldKey, 'name']}
                          rules={[{ required: true, message: 'Missing name' }]}
                        >
                          <Input />
                        </Form.Item>
                </Col>
              </Row>

              </Col>

              <Col span={7}>
              <Row className="divfix">
              <Col span={8}  className="leftCommDiv">
                单价
              </Col>
              <Col span={16}>
                     <Form.Item
                      name={[field.name, 'unitPrice']}
                          fieldKey={[field.fieldKey, 'unitPrice']}
                          rules={[{ required: true, message: 'Missing unitPrice' }]}
                        >
                          <Input />
                        </Form.Item>
                </Col>
               
              </Row>
              </Col>

              <Col span={7}>
              <Row className="divfix">
              <Col span={8}  className="leftCommDiv">
                计量单位
              </Col>
              <Col span={14}>
                     <Form.Item
                      name={[field.name, 'unitOfMeasure']}
                          fieldKey={[field.fieldKey, 'unitOfMeasure']}
                          rules={[{ required: true, message: 'Missing unitOfMeasure' }]}
                        >
                          <Input />
                        </Form.Item>
                </Col>
                <Col span={2}>
                <MinusCircleOutlined style={{fontSize: '30px',marginTop:0}} onClick={() => remove(field.name)} />

                </Col>
              </Row>
                    
           
              </Col>
              
             
                    
           
             
          </Row>
   
        ))}
        <Form.Item >
          <Button style={{width:'100%',marginLeft:20}} type="dashed" onClick={() => add()} >
            添加加料
          </Button>
          </Form.Item>
      
      </>
      )
    }
    }
  </Form.List>
 
      </Col>


    )

 }